<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<!-- 发布者信息 -->
		<view class="issue-user">
			<view class="user-avatar">
				<cmd-avatar :src="avatar" size="md" :make="{'background-color': '#fff'}"></cmd-avatar>
			</view>
			<view class="user-info">
				<view>{{data.nickName}}</view>
				<view v-if="data.sex == 0">男</view>
				<view v-else-if="data.sex == 1">女</view>
				<view v-else="data.sex == 2">未知</view>
			</view>
			<view class="create-time">
				{{$u.timeFormat(data.createTime, 'yyyy-mm-dd')}}
			</view>
		</view>
		<view class="wrap">
			<u-swiper :list="data.imgUrl" img-mode="aspectFit" mode="number" :autoplay="false"
				indicator-pos="bottomRight" :height="550"></u-swiper>
		</view>
		<view class="shop-details">
			<view class="details-title">
				{{data.comName}}
			</view>
			<view class="details-method">
				<view v-if="data.method == 0">以钱换物</view>
				<view v-if="data.method == 1">以物换物</view>
				<view v-if="data.method == 2">免费送</view>
			</view>
			<view v-if="data.commom != undefined" class="details-common">
				{{data.commom}}
			</view>
		</view>
		<view class="shop-money">
			<view class="shop-slod">¥<span>{{data.soldMoney}}</span></view>
			<view class="shop-orig">原价<span>¥{{data.oriMoney}}</span></view>
		</view>
		<view class="shop-descript">
			<u-parse :html="data.comDesc"></u-parse>
		</view>
		<u-modal v-model="show" :title-style="{fontWeight: 'bold'}" show-cancel-button
			:content-style="{padding: '35rpx 20rpx'}" title="购买" @confirm="buy()">
			<view class="slot-content">
				是否预付定金<span style="color: red;"> ¥{{priceFormat(data.soldMoney * 0.1)}}</span>
				<br>注：定金概不退！！！
			</view>
		</u-modal>
		<view class="message">
			<view class="message-title">留言·<span>{{commentList.length}}</span></view>
			<view class="message-content">
				<u-empty text="暂无人留言" mode="message" :show="isZero">
				</u-empty>
				<view class="comment" v-for="(res, index) in commentList" :key="res.cId">
					<view class="left">
						<cmd-avatar
							:src="res.avatar == '' ? '../../static/profile.jpg' : 'http://localhost:8088' + res.avatar"
							:size="32">
						</cmd-avatar>
					</view>
					<view class="right">
						<view class="top">
							<view class="name">{{ res.cuserName }}</view>
						</view>
						<view class="content">{{ res.content }}</view>
						<view class="reply-box">
							<view class="item" v-for="(item, index) in res.replyList.slice(0,2)" :key="item.index">
								<view class="username">{{ item.ruserName }}</view>
								<view class="text">{{ item.reContent }}</view>
							</view>
							<view class="all-reply" @tap="toAllReply(res.cId)"
								v-if="res.replyList != undefined && res.replyList.length>1">
								共{{ res.allReply }}条回复
								<u-icon class="more" name="arrow-right" :size="26"></u-icon>
							</view>
						</view>
						<view class="bottom">
							{{res.commTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!isChat" class="navigation">
			<view class="left" @click="collect">
				<view class="item">
					<view v-if="like">
						<u-icon name="heart-fill" :size="40" color="#ed3f14"></u-icon>
					</view>
					<view v-if="!like">
						<u-icon name="heart" :size="40" :color="$u.color['contentColor']"></u-icon>
					</view>
					<view class="text u-line-1">收藏</view>
				</view>
			</view>
			<view class="right">
				<view class="chat btn u-line-1" @click="isChat = true">聊一聊</view>
				<view v-if="data.comStatus == '1' && data.method != '1'" class="buy btn u-line-1" @click="toBuy()">立即购买
				</view>
				<view class="sell btn u-line-1" v-if="data.comStatus == '4'">已出售</view>
			</view>
		</view>
		<!-- 留言输入框 -->
		<view class="comment-input" v-if="isChat">
			<view class="left">
				<view>
					<u-input v-model="inputVal" type="text" :custom-style="inputStyle" />
				</view>
			</view>
			<view class="right">
				<view class="send btn u-line-1" @click="send()">发送</view>
				<view class="cancel btn u-line-1" @click="isChat = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				title: "商品详情",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				data: {},
				avatar: "",
				show: false,
				isZero: false,
				like: false,
				inputStyle: {
					width: '380rpx'
				},
				inputVal: '',
				isChat: false,
				isReply: false,
				commentList: [],
				// 中间数据
				comData: {}
			}
		},
		computed: {
			...mapGetters(['getUserInfo']),
			priceFormat() {
				return val => {
					return Number(val).toFixed(2)
				}
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			// console.log(option.comId); //打印出上个页面传递的参数。
			this.initData(option.comId);
			this.check(option.comId);
			this.getComment(option.comId);
		},
		methods: {
			initData(comId) {
				Vue.prototype.$u.api.getDetailByComId({
					comId: comId
				}).then(res => {
					this.data = res;
					this.avatar = res.avatar == "" ? "../../static/profile.jpg" : "http://localhost:8088" + res
						.avatar;
				})
			},
			// 判断是否收藏
			check(comId) {
				Vue.prototype.$u.api.checkIsCollect({
					comId: comId,
					userId: this.getUserInfo.userId
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.like = true
					}
				})
			},
			// 收藏
			collect() {
				if (this.like) {
					// 取消收藏
					Vue.prototype.$u.api.cancelCollect({
						comId: this.data.comId,
						userId: this.getUserInfo.userId
					}).then(res => {
						if (res.code == 200) {
							this.like = false;
							uni.showToast({
								icon: "none",
								title: "取消收藏成功"
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "取消收藏失败"
							})
						}
					})
				} else {
					// 收藏
					Vue.prototype.$u.api.toCollect({
						comId: this.data.comId,
						userId: this.getUserInfo.userId
					}).then(res => {
						if (res.code == 200) {
							this.like = true;
							uni.showToast({
								icon: "none",
								title: "收藏成功"
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "收藏失败"
							})
						}
					})
				}
			},
			// 发送评论（留言）
			send() {
				Vue.prototype.$u.api.addComment({
					comId: this.data.comId,
					cuserId: this.getUserInfo.userId,
					spuserId: this.data.userId,
					content: this.inputVal
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.isChat = false;
						this.inputVal = '';
						uni.showToast({
							icon: "none",
							title: "留言成功"
						})
						this.getComment(this.data.comId);
					} else {
						uni.showToast({
							icon: "none",
							title: "留言失败"
						})
					}
				})
			},
			// 跳转到全部回复
			toAllReply(cId) {
				uni.navigateTo({
					url: '/pages/comment/comment?cId=' + cId
				});
			},
			// 评论列表
			getComment(comId) {
				Vue.prototype.$u.api.getCommentListByComId({
					comId: comId
				}).then(res => {
					if (res.code == 200) {
						this.isZero = false;
						this.commentList = res.data
					} else {
						this.isZero = true;
					}
				})
			},
			// 购买
			toBuy() {
				if (this.getUserInfo.userId == this.data.userId) {
					Vue.prototype.$u.toast("抱歉！您不能购买自己的物品！");
				} else {
					this.show = true
				}
			},
			buy() {
				Vue.prototype.$u.api.createOrder({
					comId: this.data.comId,
					iuserId: this.data.userId,
					suserId: this.getUserInfo.userId
				}).then(res => {
					if(res.code == 200){
						// 留言已购买信息
						Vue.prototype.$u.api.addComment({
							comId: this.data.comId,
							cuserId: this.getUserInfo.userId,
							spuserId: this.data.userId,
							content: '我已下单，请尽快对接哦！'
						}).then(res => {
							if (res.code == 200) {
								this.getComment(this.data.comId);
								this.isZero = false;
							} else {
								uni.showToast({
									icon: "none",
									title: "留言失败"
								})
							}
						})
						Vue.prototype.$u.toast("购买成功！");
						this.initData(this.data.comId);
					}else {
						Vue.prototype.$u.toast("购买失败！");
					}
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.issue-user {
		padding: 0 20rpx 10rpx 20rpx;
		display: inline-flex;
	}

	.user-avatar {
		padding: 10rpx 0;
	}

	.user-info {
		margin: 20rpx 0 0 10rpx;
	}

	.user-info :first-child {
		font-size: 32rpx;
		font-weight: bold;
		width: 350rpx;
		overflow: hidden; //超出一行文字自动隐藏 
		text-overflow: ellipsis; //文字隐藏后添加省略号
		white-space: nowrap; //强制不换行
	}

	.user-info :last-child {
		font-size: 20rpx;
		color: #9f9f9f;
	}

	.create-time {
		font-size: 25rpx;
		color: #9f9f9f;
		padding: 30rpx 0 0 80rpx;
	}

	.wrap {
		margin: 10rpx 20rpx 10rpx 20rpx;
	}

	.shop-details {
		margin: 10rpx 20rpx 10rpx 20rpx;
	}

	.details-title {
		font-weight: bold;
		font-size: 30rpx;
	}

	.details-common {
		background-color: #dfdfdf;
		display: inline-block;
		padding: 8rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.details-method {
		background-color: #dfdfdf;
		display: inline-block;
		padding: 8rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 8rpx;
		display: inline-flex;
	}

	.shop-money {
		display: inline-flex;
	}

	.shop-slod {
		font-size: 26rpx;
		margin: 10rpx 20rpx;
		color: red;
		font-weight: bold;
	}

	.shop-slod>span {
		font-size: 32rpx;
	}

	.shop-orig {
		font-size: 28rpx;
		margin: 13rpx 0;
		color: gray;
		text-decoration: line-through;
	}

	.shop-descript {
		margin: 10rpx 20rpx;
	}

	.message {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		margin-bottom: 110rpx;
	}

	.message-title {
		padding: 20rpx 0 20rpx 20rpx;
	}

	.message-title>span {
		font-weight: bold;
	}

	.comment-input {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;

		.left {
			display: flex;
			font-size: 20rpx;
			margin-left: 30rpx;
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			position: absolute;
			right: 0;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.send {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.cancel {
				background-color: #cccccc;
				margin-right: 5rpx;
			}
		}
	}

	.navigation {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			position: absolute;
			right: 0;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.chat {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}

			.sell {
				background-color: #dcdcdc;
			}
		}
	}

	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
